import React, { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import axios from "axios";
import { ListItemType } from "../../types";
import {
  Notify,
  Swiper,
  NavBar,
  Typography,
  Cell,
  Image,
  ActionBar,
} from "react-vant";
import moment from "moment";
import { CartO, ChatO, ShopO } from "@react-vant/icons";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { addCar } from "../../app/car/carSlice";
import { useCar } from "../../hooks";
const Index: React.FC = () => {
  const { id } = useParams();
  const navigate = useNavigate();

  const [item, setItem] = useState<ListItemType | null>(null);

  const [loading, setLoading] = useState(true);
  const dispatch = useAppDispatch();
  
  const { totalCount } = useCar()

  const fetchData = async () => {
    const resp = await axios.get("/api/list/" + id);
    const { code, message, data } = resp.data;
    if (code === 200) {
      setItem(data);
      setLoading(false);
    } else {
      Notify.show({ type: "danger", message });
    }
  };

  useEffect(() => {
    fetchData();
  }, [id]);

  if (loading || !item) return <div>数据请求中...</div>;

  return (
    <div>
      {/* 头部 */}
      <NavBar title="详情页" onClickLeft={() => navigate(-1)} />
      {/* 轮播 */}
      <Swiper autoplay={3000}>
        {item.images.map((v, i) => {
          return (
            <Swiper.Item key={i}>
              <img
                src={v}
                alt=""
                style={{ height: 200, width: "100vw", objectFit: "cover" }}
              />
            </Swiper.Item>
          );
        })}
      </Swiper>
      {/* 标题 */}
      <Typography.Title level={2}>{item.title}</Typography.Title>
      {/* 描述 */}
      <Typography.Text>{item.desc}</Typography.Text>
      {/* 规格 */}
      <Typography.Title strong level={5} style={{ color: "red" }}>
        ￥: {item.price}
      </Typography.Title>
      {/* 评论列表 */}
      <div>
        {[...item.comment]
          .sort((a, b) => {
            return (
              new Date(b.createTime).getTime() -
              new Date(a.createTime).getTime()
            );
          })
          .map((v) => {
            return (
              <Cell
                center
                key={v.id}
                title={
                  <div
                    style={{ display: "flex", justifyContent: "space-between" }}
                  >
                    <span>{v.nickname}</span>
                    <span>
                      {moment(
                        v.createTime.replace(/-/g, "").slice(0, 8)
                      ).fromNow()}
                    </span>
                  </div>
                }
                label={v.content}
                icon={<Image width={44} height={44} src={v.avator} round />}
              />
            );
          })}
      </div>

      {/* 动作栏 */}
      <div className="demo-action-bar" style={{ height: 50 }}>
        <ActionBar>
          <ActionBar.Icon
            icon={<ChatO />}
            text="客服"
            onClick={() => console.log("chat click")}
          />
          <ActionBar.Icon
            icon={<CartO />}
            text="购物车"
            badge={{ content: totalCount || "" }}
            onClick={() => console.log("cart click")}
          />
          <ActionBar.Icon
            icon={<ShopO />}
            text="店铺"
            onClick={() => console.log("shop click")}
          />
          <ActionBar.Button
            type="danger"
            text="立即购买"
            onClick={() => dispatch(addCar(item))}
          />
        </ActionBar>
      </div>
    </div>
  );
};

export default Index;
